<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery插件性感美女图片鼠标悬浮滑动显示全图美女</title>
<meta name="description" content="jquery图片插件制作性感美女图片通过鼠标悬停到图片上，图片滑动显示全图美女过程。多种图片滑动展示浏览jQuery图片插件。" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
#topmenu{width:820px;margin:20px auto 0 auto;height:40px;position:relative;}
#topmenu ul li{float:left;font-size:12px;list-style:none;background:#222;position:relative;text-align:center;width:70px;margin:0 10px;display:inline;line-height:30px;}
#topmenu ul li a{color:#aaa;text-decoration:none;}
#topmenu ul li a:hover{color:#fff;}
#topmenu ul li.active a{color:#fff;font-weight:800;}
.demo{width:820px;margin:0 auto;}
.clear{clear:both;display:block;height:0;overflow:hidden;}
/* images */
#images img{float:left;margin:10px;border:2px solid #ccc;}
</style>
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.asexy.min.js"></script>
</head>
<body>

<div id="topmenu">
	<ul>
		<li><a target="_blank" href="#">实例一</a></li>
		<li><a href="demo01.html" target="_blank">实例二</a></li>
		<li class="active"><a href="demo02.html" target="_blank">实例三</a></li>
	</ul>
</div>

<div class="demo">
	
	<div id="images">
        <img src="images/Peach_and_Lime.jpg" alt="Peach and Lime" />
        <img src="images/Rock_Chick.jpg" alt="Rock Chick" />
        <img src="images/Angel.jpg" alt="Angel" />
        <img src="images/More_stripes.jpg" alt="More stripes" />
    </div>
    <br class="clear"/>
	
</div>


<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){    
    $('#images img:eq(0)').asexy({
        width:776,
        height:200
    });
    
    $('#images img:eq(1)').asexy({
        width:376,
        height:100
    });
    
    $('#images img:eq(2)').asexy({
        width:376,
        height:100,
        opacity:0.2,
        top:"center",
        func:"vertical"
    });
    
    $('#images img:eq(3)').asexy({
        width:376,
        opacity:0.2,
        func:"zigzag"
    });
});
//]]>
</script>
</body>
</html>